<template>
	<view>
		<view class="main"
			style="background: url.././static/img/url(../../static/img/fbg.png) no-repeat; background-size: 100%;">

			<view class="shuru" style="padding: 3vw 5vw;">
				<text class="shuru_tit t1">单条广告价格</text>
				<text class="shuru_text t1">{{amount}}元</text>
				<!-- <text class="shuru_tit t1">管理费费率</text>
				<text class="shuru_text t1">{{feilv}}%</text> -->
				<text class="shuru_tit t1">购买条数</text>
				<input type="number" value="" placeholder="请输入购买条数" class="shuru_text t1" v-model="lilv"
					style="background: #f6f6f6;border-radius:1vw;padding: 0 2vw;" />

				<view class="tuic1 t11" @click="setorder()" style="margin:3vw 10%;">计算费用</view>
			</view>
			<!-- 	<view class="shuru">
				<text class="shuru_tit t1">支付方式</text>
				<view class="xuan_li t1" @click="types(1)" :class="[typen==1?'act':'']">
					<image src="../../static/img/wx.png" mode="widthFix"></image>微信
				</view>
				<view class="xuan_li t1" @click="types(2)" :class="[typen==2?'act':'']">
					<image src="../../static/img/zfb.png" mode="widthFix"></image>支付宝
				</view>
			</view> -->
			<!-- </view> -->
			<view class="shuru" v-if="platAmount!=''" style="padding: 3vw 5vw; margin-bottom: 10vw;">
				
				<uni-collapse>
					<uni-collapse-item :title="totalFee" show-arrow>
						<view class="item" v-if="isSell&&(userType==99 || userType==10)">
							<text class="shuru_tit t1">产品服务费</text>
							<text class="shuru_text t1" style="border: none;" v-if="isSell">{{serviceAmount?serviceAmount/100:0}}元</text>
						</view>
						
						<view class="item">
							<text class="shuru_tit t1">平台管理费</text>
							<text class="shuru_text t1" style="border: none;">{{platAmount/100}}元</text>
						</view>
						<view class="item">
							<text class="shuru_tit t1">广告需支付金额</text>
							<text class="shuru_text t1" style="border: none;">{{adAmount/100}}元</text>
						</view>
						<view class="item">
							<text class="shuru_tit t1">商家宣传收益</text>
							<text class="shuru_text t1" style="border: none;">{{mchAmount/100}}元</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse>
					<uni-collapse-item title="费用说明">
						<view class="item">1：平台管理费不退</view>
						<view class="item">2：视频可退剩余条数*单条金额</view>
						<view class="item">3：产品服务费可退剩余未销售产品服务费*单件</view>
						<view class="item" v-if="placement!=='2'">4：商家宣传收益可退剩余条数*单条金额</view>
					</uni-collapse-item>
				</uni-collapse>
				
				<!-- <text class="shuru_tit t20" style="text-align: center;width: 100%;">费用明细</text>
				<text class="shuru_tit t1">平台收取佣金</text>
				<text class="shuru_text t1" style="border: none;">{{platAmount/100}}元</text>
				<text class="shuru_tit t1">广告需支付金额</text>
				<text class="shuru_text t1" style="border: none;">{{adAmount/100}}元</text>
				<text class="shuru_tit t1">代理商佣金金额</text>
				<text class="shuru_text t1" style="border: none;">{{mchAmount/100}}元</text>
				<text class="shuru_tit t1">总计支付金额</text>
				<text class="shuru_text t1" style="border: none;">{{totalAmount/100}}元</text> -->
				
				<text class="shuru_tit t1 payway">支付方式</text>
				<view class="xuan_li t1" @click="types(1)" :class="[typen==1?'act':'']">
					<image src="../../static/img/wx.png" mode="widthFix"></image>微信
				</view>
				<view class="xuan_li t1" @click="types(2)" :class="[typen==2?'act':'']">
					<image src="../../static/img/zfb.png" mode="widthFix"></image>支付宝
				</view>
				<view class="tuic t2" @click="tianjia()">确定购买</view>
			</view>
			<!-- <view style="word-wrap:break-word">{{infos}}</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainid: '',
				lilv: '',
				typen: 1,
				qianbao: '',
				delid: '',
				checks: true,
				tishi: false,
				len: 0,
				Inv: 0,
				id: '',
				money: 0,
				array: ['支付宝', '微信'],
				infos: '',
				feilv: 0,
				amount: 0,
				platAmount:'',
				totalAmount:'',
				mchAmount:'',
				adAmount:'',
				isnew: false,
				serviceAmount:'', //产品服务费
				adsellAmount:'', //产品管理费
				userType:0 ,//用户身份
				isSell:false,
				totalFee:'总计费用：',
				showArrow:true,
				placement:'2',
			}
		},
		onLoad(options) {
			var _this = this;
			console.log(options);
			_this.id = options.id;
			_this.amount = options.amount;
			_this.placement = options.placement;
			if (options.isnew) {
				_this.isnew = true; //用来判断是否是发布广告时购买的
			}
			if('1'==options.sell){
				this.isSell = true
			}
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;
					_this.userType = res.data.type;
						
				}
			});
			console.log('用户类型：',this.userType)
		},
		methods: {
			// 平台管理费费率
			feil() {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mch/getDefaultAdSellPlatServiceProportion', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						// id: id
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading(); //关闭加载动画
						if (res.data.status == '200') {
							_this.feilv = Number(res.data.data) / 100; //产品图片
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},
			types(e) {
				console.log(e);
				this.typen = e;
			},
			setorder() {
				var _this = this;
				if (_this.checks === false) {
					return false
				}
				if (!_this.lilv) {
					uni.showToast({
						title: '请输入购买条数',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (!(/(^[1-9]\d*$)/.test(_this.lilv))) {
					uni.showToast({
						title: '购买条数必须大于0',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				_this.checks = false
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mch/getBuyAdTradeInfo', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						adId: _this.id, //		广告ID		true							string
						payerId: _this.mainid, //	用户ID（mainId）		true	string
						num: _this.lilv, //	购买条数		true	integer
						plat: '1', //	支付平台		true	integer 平台类型
						payType: _this.typen, //		支付方式		true	integer
					},
					success: (res) => {
						console.log(res.data);

						_this.platAmount = res.data.data.platAmount;
						_this.totalAmount = res.data.data.totalAmount;
						_this.mchAmount = res.data.data.mchAmount;
						_this.adAmount = res.data.data.adAmount;
						
						_this.serviceAmount = res.data.data.serviceAmount
						_this.adsellAmount = res.data.data.adsellAmount
						let value = parseFloat(this.totalAmount)/100
						this.totalFee = `总计费用：${value}元`
					},
					fail: function(err) {
						_this.checks = true
						// _this.infos = _this.infos + JSON.stringify(err);
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			tianjia() {
				var _this = this;
				uni.showLoading();
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/buyAd', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						adId: _this.id, //		广告ID		true							string
						payerId: _this.mainid, //	用户ID（mainId）		true	string
						num: _this.lilv, //	购买条数		true	integer
						plat: '1', //	支付平台		true	integer 平台类型
						payType: _this.typen, //		支付方式		true	integer
					},
					success: (res) => {
						console.log(res.data);
						uni.hideLoading(); //关闭加载动画
						_this.checks = true
						if (res.data.status == '200') {
							_this.money = res.data.data.trade.amount / 100;
							//支付宝支付方式
							// _this.sures(res.data.data.trade.id);
							// return;
							if (_this.typen == '1') {
								var orderInfo = res.data.data.third;
								var oid = res.data.data.trade.id;
								_this.infos = JSON.stringify(res.data.data.third);
								console.log(orderInfo);
								// let data = {									
								// 		"appid": orderInfo.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								// 		"noncestr": orderInfo.noncestr, // 随机字符串
								// 		"package": orderInfo.package,        // 固定值
								// 		"partnerid":  orderInfo.partnerid,      // 微信支付商户号
								// 		"prepayid":  orderInfo.prepayid, // 统一下单订单号 
								// 		"timestamp":  parseInt(orderInfo.timestamp,        // 时间戳（单位：秒）
								// 		"sign":  orderInfo.sign // 签名，这里用的 MD5 签名
								// 	};
								// console.log(data);

								// 微信支付
								uni.requestPayment({
									provider: "wxpay",
									// timeStamp: JSON.stringify(orderInfo.timestamp),  
									//                   nonceStr: orderInfo.noncestr,  
									//                   package: orderInfo.package,  
									//                   signType:"MD5",  
									//                   paySign: orderInfo.sign,  
									//                   orderInfo: JSON.stringify({  
									//                       appid: orderInfo.appid,  
									//                       noncestr: orderInfo.noncestr,  
									//                       package: orderInfo.package,  
									//                       partnerid: orderInfo.partnerid,  
									//                       prepayid: orderInfo.prepayid,  
									//                       timestamp: orderInfo.timestamp,  
									//                       sign: orderInfo.sign,  
									//                   }), 
									orderInfo: orderInfo,
									success(e) {
										uni.showToast({
											title: '支付成功',
											icon: 'none',
											duration: 2000
										});
										// 支付成功之后，返回上一页刷新上一页面
										// setTimeout(function() {
										_this.sures(oid);
										// uni.navigateBack({
										// 	delta: 1
										// })
										// }, 2000)
									},
									fail(e) {
										this.checks = true
										_this.infos = _this.infos + JSON.stringify(e);
										console.log(e);
										uni.showToast({
											title: e.errMsg,
											icon: 'none',
											duration: 2000
										});
										// _this.succes(orderid);
									}
								})
							} else {
								_this.infos = JSON.stringify(res.data.data);
								var oid = res.data.data.trade.id;
								var orderInfo = res.data.data.third.body;
								// console.log(orderInfo);
								// 支付宝支付
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: orderInfo, //支付宝订单数据
									success: function(res) {
										uni.showToast({
											title: '支付成功',
											icon: 'none',
											duration: 2000
										});
										setTimeout(function() {
											_this.sures(oid);
											// uni.navigateBack({
											// 	delta: 1
											// })
										}, 2000)
									},
									fail: function(err) {
										_this.checks = true
										// _this.infos = _this.infos + JSON.stringify(err);
										uni.showToast({
											title: err.errMsg,
											icon: 'none',
											duration: 2000
										});
									}
								});
							}


						} else if (res.data.status == '501') {
							// var str=JSON.stringify(res.data.data);
							let str = "";
							for (var property in res.data.data) str += res.data.data[property] + ";\n";
							uni.showToast({
								title: str,
								icon: 'none',
								duration: 3000
							});
						} else {

							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						_this.checks = true
						console.log(error)
					}
				});
			},
			sures(id) {
				var _this = this;
				console.log(id);
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/callbackBuyAd/' + id + '/' + 0, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id, //	广告ID		true	string
						isUsed: 0
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == '200') {
							uni.showToast({
								title: '确认购买成功',
								icon: 'none',
								duration: 2000
							});
							// 支付成功之后，返回上一页刷新上一页面
							setTimeout(function() {

								if (_this.isnew == true) {

									uni.navigateBack({
										delta: 3
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}
							}, 2000)
						} else {

							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						_this.checks = true
						console.log(error)
					}
				});
			},
			// succes(id) {
			// 	uni.request({
			// 		header: {
			// 			'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
			// 		},
			// 		url: getApp().globalData.url + 'trade/tradeNotify', //仅为示例，并非真实接口地址。
			// 		method: 'POST',
			// 		data: {
			// 			id: id, //	广告ID		true	string
			// 		},
			// 		success: (res) => {
			// 			console.log(res);
			// 			if (res.data.status == '200') {
			// 				uni.showToast({
			// 					title: '支付成功',
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			// 				// 支付成功之后，返回上一页刷新上一页面
			// 				setTimeout(function() {
			// 					let pages = getCurrentPages(); // 当前页面
			// 					let beforePage = pages[pages.length - 2]; // 前一个页面
			// 					uni.navigateBack({
			// 						success: function() {
			// 							beforePage.mlist(); // 执行前一个页面的onLoad方法
			// 						}
			// 					});
			// 				}, 2000);
			// 			} else {

			// 				uni.showToast({
			// 					title: res.data.msg,
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			// 			}
			// 		},
			// 		fail: (error) => {
			// 			_this.checks = true
			// 			console.log(error)
			// 		}
			// 	});
			// }
		}
	}
</script>

<style>
	.baodan_xuzhi_main {
		width: 100%;
		height: 100vh;
		display: block;
		float: left;
		background: url(../../static/img/bg.png) repeat;
		position: fixed;
		top: 0;
		left: 0;
	}

	.baodan_xuzhi_tit {
		width: 100%;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		text-align: center;
	}

	.baodan_xuzhi_info {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
		margin-top: 2vw;
	}

	.baodan_clo {
		width: 6vw;
		height: 6vw;
		display: block;
		float: left;
		position: absolute;
		top: 2vw;
		right: 2vw;
		border-radius: 50%;
		border: 1px solid #000;
		padding: 1vw;
	}

	.baodan_clo image {
		width: 3.7vw;
		height: 3.7vw;
		display: block;
		float: left;
	}

	.kaitong {
		width: 80%;
		height: 12vw;
		display: block;
		float: left;
		background: url(../../static/img/but1.png) no-repeat top center;
		background-size: 100%;
		margin: 2vw 10%;
		text-align: center;
		line-height: 12vw;
	}

	.center_top {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.baodan_list {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 2vw 5%;
		background: #fff;
		border-radius: 1vw;
		padding: 4vw;
		box-shadow: 0px 0px 5px #F2F2F2;
		margin-top: 4vw;
	}

	.baodan_list_tit {
		width: 75%;
		height: auto;
		display: block;
		float: left;
	}

	.baodan_but {
		width: 20%;
		height: 6vw;
		display: block;
		float: right;
		border-radius: 2vw;
		background: url(../../static/img/but.png) no-repeat top center;
		background-size: 100%;
		line-height: 6vw;
		text-align: center;
		margin-top: 3vw;
	}

	.baodan_xuzhi {
		width: 80%;
		height: auto;
		display: block;
		float: left;
		background: #fff;
		box-shadow: 0px 0px 5px #F2F2F2;
		padding: 4vw;
		position: fixed;
		top: 40vw;
		left: 10%;
		border-radius: 1vw;
	}

	.baodan_xuzhi_tit {
		width: 100%;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		text-align: center;
	}

	.baodan_into {
		position: relative;
		width: 100%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
		margin-top: 2vw;
		overflow: hidden;
	}

	.baodan_into::after {
		width: 7vw;
		height: 7vw;
		content: "…";
		position: absolute;
		top: 0;
		right: 0;
		background: #fff;
		padding-left: 2vw;
		display: block;
		float: right;
	}

	.shuru {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		border-radius: 1vw;
		overflow: hidden;
		padding: 2vw 4vw;
		background: #fff;
		margin-top: 3vw;
		box-shadow: 0px 0px 5px #F2F2F2;
	}

	.shuru_tit {
		width: 40%;
		height: 10vw;
		line-height: 10vw;
		margin: 1vw 0;
		display: block;
		float: left;
	}

	.shuru_text {
		width: 40%;
		height: 10vw;
		line-height: 10vw;
		margin: 1vw 0;
		display: block;
		float: right;
		text-align: right;
	}

	.xuan_li {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		display: block;
		float: left;
		border: 1px solid #eee;
		border-radius: 1vw;
		margin: 2vw 0;
	}

	.xuan_li image {
		width: 6vw;
		height: auto;
		display: block;
		float: left;
		margin-top: 2vw;
		margin-left: 5vw;
		margin-right: 2vw;
	}

	.act {
		/* background: #F1C75E; */
		border: 1px solid #F1C75E;
		color: #F1C75E;
	}
	.item{
		padding-left: 20upx;
		padding-right: 20upx;
	}
	.payway{
		font-size: 14px;
		margin-left: 20upx;
	}
</style>
